<template>
  <div class="solution">
    <carousel></carousel>
    <div class="container">
      <div class="parking">
        <indicatorArrow :title="'路边停车'"></indicatorArrow>
        <div class="hoverTree">
          <ul>
            <li :class="solve ? 'active' : 'fl'" @mousemove="system = false; solve = true; realization = false">
              <span class="item" :style="{backgroundImage: 'url('+(solve ? solveImgb : solveImg)+')'}"></span>
              <span class="des">解决方案</span>
            </li>
            <li :class="system ? 'active' : 'fl'" @mousemove="system = true; solve = false; realization = false">
              <span class="item" :style="{backgroundImage: 'url('+(system ? systemImgb : systemImg)+')'}"></span>
              <span class="des">系统前端</span>
            </li>
            <li :class="realization ? 'active' : 'fl'" @mousemove="system = false; solve = false; realization = true">
              <span class="item" :style="{backgroundImage: 'url('+(realization ? realizationImgb : realizationImg)+')'}"></span>
              <span class="des">实现效果</span>
            </li>
          </ul>
          <div class="indicator">
            <img src="http://www.zhuyitech.com/static/img/img_soluttion.a523909.png" alt="" v-show="solve">
            <img src="http://www.zhuyitech.com/static/img/img_system.f070ac7.png" alt="" v-show="system">
            <img src="http://www.zhuyitech.com/static/img/img_effect.7c2f909.png" alt="" v-show="realization">
          </div>
        </div>
        <div>
          <img src="http://www.zhuyitech.com/static/img/img_bigimg01.2c28207.png" alt="">
        </div>
      </div>
      <div class="parkingLot">
        <indicatorArrow :title="'封闭式停车场'"></indicatorArrow>
        <div class="hoverTree">
          <ul>
            <li :class="parkingProcess ? 'active' : 'fl'" @mousemove="systemWEB = false; parkingProcess = true; realizationEffect = false">
              <span class="item" :style="{backgroundImage: 'url('+(parkingProcess ? solveImgb : solveImg)+')'}"></span>
              <span class="des">停车流程</span>
            </li>
            <li :class="systemWEB ? 'active' : 'fl'" @mousemove="systemWEB = true; parkingProcess = false; realizationEffect = false">
              <span class="item" :style="{backgroundImage: 'url('+(systemWEB ? systemImgb : systemImg)+')'}"></span>
              <span class="des">系统前端</span>
            </li>
            <li :class="realizationEffect ? 'active' : 'fl'" @mousemove="systemWEB = false; parkingProcess = false; realizationEffect = true">
              <span class="item" :style="{backgroundImage: 'url('+(realizationEffect ? realizationImgb : realizationImg)+')'}"></span>
              <span class="des">实现效果</span>
            </li>
          </ul>
          <div class="indicator">
            <img src="http://www.zhuyitech.com/static/img/img_process.444d92b.png" alt="" v-show="parkingProcess">
            <img src="http://www.zhuyitech.com/static/img/img_system02.01ce39a.png" alt="" v-show="systemWEB">
            <img src="http://www.zhuyitech.com/static/img/img_effect02.59abe6c.png" alt="" v-show="realizationEffect">
          </div>
        </div>
        <div>
          <img src="http://www.zhuyitech.com/static/img/img_bigimg02.e774183.png" alt="">
        </div>
      </div>
      <div class="parkingSpace">
        <indicatorArrow :title="'共享停车位'"></indicatorArrow>
        <div class="falseGraph">
          <img src="http://www.zhuyitech.com/static/img/img_cartext.6a1c129.png" alt="">
        </div>
        <div>
          <img src="http://www.zhuyitech.com/static/img/img_bigimg03.497d65a.png" alt="">
        </div>
      </div>
      <div class="advantage">
        <indicatorArrow :title="'方案优势'"></indicatorArrow>
        <div class="Speechless"><img src="http://www.zhuyitech.com/static/img/img_advantage.9b300dd.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from '../components/carousel.vue'
import indicatorArrow from "../components/indicatorArrow.vue"
import solveImg from '../assets/image/solution/solve1.png'
import solveImgb from '../assets/image/solution/solve2.png'
import systemImg from '../assets/image/solution/system1.png'
import systemImgb from '../assets/image/solution/system2.png'
import realizationImg from '../assets/image/solution/realization1.png'
import realizationImgb from '../assets/image/solution/realization2.png'


export default {
  data() {
    return {
      parkingProcess: true,
      systemWEB: false,
      realizationEffect: false,
      solveImg,
      solveImgb,
      systemImg,
      systemImgb,
      realizationImg,
      realizationImgb,
      solve: true,
      system: false,
      realization: false
    }
  },
  components: {Carousel, indicatorArrow},
  methods: {

  },
  created(){

  },
  mounted(){

  }
}
</script>

<style lang="scss" scoped>
.solution {
  margin-top: 80px;
  width: 100%;
  text-align: center;
}
.parking {
  padding-bottom: 102px;
  background: #FFFFFF;
  text-align: center;

  .indicator {
    margin-top: 60px;
  }

  .hoverTree + div {
    margin-top: 62px;
  }

  .hoverTree > ul {
    margin-top: 66px;

    > li {
      display: inline-block;
      width: 93px;
      text-align: center;
      padding-bottom: 15px;
      box-sizing: border-box;

      > .item {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: contain;
      }

      > .des {
        display: inline-block;
        padding-bottom: 15px;
        margin-top: 15px;
      }
    }

    > li:nth-child(2) {
      margin: 0px 50px;
    }

    .fl {    
      color: #b4b4b4;
    }

    .active {
      color: #3296FA;
      border-bottom: 4px solid #3296FA;
    }
  }
}
.parkingLot {
  padding-bottom: 102px;
  background: #FAFAFA;
  text-align: center;

  .indicator {
    margin-top: 60px;
  }

  .hoverTree + div {
    margin-top: 62px;
  }

  .hoverTree > ul {
    margin-top: 66px;

    > li {
      display: inline-block;
      width: 93px;
      text-align: center;
      padding-bottom: 15px;
      box-sizing: border-box;

      > .item {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: contain;
      }

      > .des {
        display: inline-block;
        padding-bottom: 15px;
        margin-top: 15px;
      }
    }

    > li:nth-child(2) {
      margin: 0px 50px;
    }

    .fl {    
      color: #b4b4b4;
    }

    .active {
      color: #3296FA;
      border-bottom: 4px solid #3296FA;
    }
  }
}
.parkingSpace {
  background-color: #FFFFFF;
  text-align: center;
  padding-bottom: 107px;

  > .falseGraph {
    margin-top: 74px;
  }

  > .falseGraph + div {
    margin-top: 76px;
  }
}
.advantage {
  background-color: #FAFAFA;
  text-align: center;
  padding-bottom: 107px;

  > .Speechless {
    margin-top: 107px;
  }
}
</style>